<template>
  <div class="chat-dialog">
    <div class="header">
      <h3>AI 对话模式</h3>
      <div class="header-controls">
        <div class="control-item">
          <span>语音播放</span>
          <el-switch v-model="ttsEnabled" @change="toggleTTS" />
        </div>
        <div class="control-item">
          <span>AI</span>
          <el-switch v-model="aiEnabled" />
        </div>
      </div>
    </div>

    <div class="chat-container">
      <div class="chat-messages" ref="messagesContainer">
        <div v-for="(message, index) in chatMessages" :key="index + '-' + message.text.length"
          :class="['message', message.role]">
          <div class="message-content">
            <template
              v-if="message.role === 'ai' && message.isTyping && !message.hasContent && (!message.text || message.text.trim() === '')">
              <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </template>
            <span v-if="message.text && message.text.trim() !== ''">{{ message.text }}</span>
          </div>
        </div>
      </div>

      <div class="input-area">
        <input type="text" v-model="userInput" @keyup.enter="sendMessage" placeholder="直接输入文本发送给AI..."
          :disabled="!aiEnabled || processing">
        <button @click="sendMessage" :disabled="!aiEnabled || processing || !userInput.trim()">
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick, onUnmounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  transcriptionResult: String
});

// 状态变量
const userInput = ref('');
const aiEnabled = ref(true);
const processing = ref(false);
const chatMessages = ref([
  { role: 'system', text: '欢迎使用AI语音助手，请说话或输入文本进行对话。' }
]);

// DOM引用
const messagesContainer = ref(null);

// 添加TTS状态变量
const ttsEnabled = ref(true); // 语音播放默认开启

// 监听语音识别结果变化
watch(() => props.transcriptionResult, (newValue, oldValue) => {
  if (newValue && newValue !== oldValue && newValue.trim() !== '') {
    // 当语音识别结果有更新且不为空时，添加到对话
    addUserMessage(newValue);
  }
});
// 在script setup中添加用于去重的变量
const lastProcessedText = ref('');
const lastProcessedTimestamp = ref(0);

// 修改addUserMessage函数，添加去重检查
const addUserMessage = (text) => {
  if (!text || text.trim() === '') return;

  // 检查是否为重复消息（3秒内相同文本视为重复）
  const currentTime = Date.now();
  if (text === lastProcessedText.value &&
    currentTime - lastProcessedTimestamp.value < 3000) {
    console.log('跳过重复用户消息:', text);
    return;
  }

  // 更新去重状态
  lastProcessedText.value = text;
  lastProcessedTimestamp.value = currentTime;

  chatMessages.value.push({
    role: 'user',
    text: text.trim()
  });

  // 如果AI已启用，自动发送到后端
  if (aiEnabled.value && !processing.value) {
    processWithAI(text.trim());
  }

  // 滚动到底部
  scrollToBottom();
};

// 发送用户输入的消息
const sendMessage = () => {
  const text = userInput.value.trim();
  if (!text || !aiEnabled.value || processing.value) return;

  addUserMessage(text);
  userInput.value = ''; // 清空输入框
};

// 通过AI处理文本
const processWithAI = (text) => {
  processing.value = true;

  // 添加临时AI消息，显示打字指示器
  const tempMessageIndex = chatMessages.value.length;
  chatMessages.value.push({
    role: 'ai',
    text: '',
    isTyping: true
  });

  // 发送websocket消息给后端处理
  const message = {
    type: 'ai_command',
    command: 'process',
    text: text
  };

  try {
    if (typeof window.sendWebSocketMessage === 'function') {
      window.sendWebSocketMessage(JSON.stringify(message));
    } else {
      console.error('WebSocket发送函数未定义');
      chatMessages.value[tempMessageIndex].text = '无法连接到AI服务，请稍后再试。';
      chatMessages.value[tempMessageIndex].isTyping = false;
      processing.value = false;
    }
  } catch (error) {
    console.error('发送WebSocket消息失败:', error);
    chatMessages.value[tempMessageIndex].text = '发送消息失败，请稍后再试。';
    chatMessages.value[tempMessageIndex].isTyping = false;
    processing.value = false;
  }

  scrollToBottom();
};

// 滚动聊天区域到底部
const scrollToBottom = () => {
  nextTick(() => {
    const element = messagesContainer.value;
    if (element) {
      console.log('滚动到底部');
      element.scrollTop = element.scrollHeight;
    } else {
      console.warn('无法找到消息容器元素');
    }
  });
};

// 修改handleAIResponse函数
const handleAIResponse = (event) => {
  const data = event.detail;
  console.log('收到AI响应:', data); // 添加日志便于调试

  // 获取当前增量文本块(text)和完整文本(full_text)
  const textChunk = data.text || '';
  const fullText = data.full_text || '';

  if (textChunk.trim() === '' && fullText.trim() === '') {
    console.warn('收到空AI响应');
    return; // 跳过空响应
  }

  console.log(`处理AI响应 - 增量文本长度: ${textChunk.length}, 增量文本: "${textChunk}", 完整文本长度: ${fullText.length}`);

  // 找到最后一条AI消息
  let lastAiMessageIndex = -1;
  for (let i = chatMessages.value.length - 1; i >= 0; i--) {
    if (chatMessages.value[i].role === 'ai') {
      lastAiMessageIndex = i;
      break;
    }
  }

  // 更新或添加AI消息
  if (lastAiMessageIndex >= 0 && chatMessages.value[lastAiMessageIndex].isTyping) {
    // 更新现有的typing消息，使用完整文本
    const oldText = chatMessages.value[lastAiMessageIndex].text;

    // 创建新的消息对象强制Vue更新视图
    const updatedMessage = { ...chatMessages.value[lastAiMessageIndex] };
    updatedMessage.text = fullText;

    // 已经有文本内容了，可以保持typing状态但隐藏loading动画
    if (fullText && fullText.trim() !== '') {
      updatedMessage.hasContent = true;
    }

    // 直接替换对象而不是修改属性，确保Vue能检测到变化
    chatMessages.value.splice(lastAiMessageIndex, 1, updatedMessage);

    // 详细日志，记录文本变化
    console.log('更新AI消息', {
      增量文本块: textChunk,
      旧文本长度: oldText.length,
      新文本长度: fullText.length,
      文本变化: fullText.length - oldText.length
    });

    // 如果是最终响应，移除typing状态
    if (data.done) {
      const finalMessage = { ...chatMessages.value[lastAiMessageIndex] };
      finalMessage.isTyping = false;
      chatMessages.value.splice(lastAiMessageIndex, 1, finalMessage);

      processing.value = false;
      console.log('AI响应完成, 总长度:', fullText.length);
    }

    // 强制DOM更新
    nextTick(() => {
      scrollToBottom();
    });
  } else {
    // 添加新消息
    console.log('添加新AI消息, 文本:', fullText.substring(0, 30) + (fullText.length > 30 ? '...' : ''));

    // 创建初始消息对象
    const newMessage = {
      role: 'ai',
      text: fullText,
      isTyping: !data.done,
      hasContent: fullText && fullText.trim() !== '' // 如果已有内容，标记hasContent为true
    };

    chatMessages.value.push(newMessage);

    if (data.done) {
      processing.value = false;
    }

    // 强制DOM更新
    nextTick(() => {
      scrollToBottom();
    });
  }

  // 强制重新渲染组件
  setTimeout(() => {
    scrollToBottom();
  }, 0);
};

// 修改handleAIProcessingStatus函数
const handleAIProcessingStatus = (event) => {
  const data = event.detail;

  if (data.status === 'started') {
    processing.value = true;

    // 检查是否已经有正在输入的AI消息
    const hasTypingMessage = chatMessages.value.some(msg =>
      msg.role === 'ai' && msg.isTyping
    );

    // 只有在没有正在输入的消息时才添加新的
    if (!hasTypingMessage) {
      chatMessages.value.push({
        role: 'ai',
        text: '',
        isTyping: true,
        hasContent: false // 初始状态下没有内容
      });
    }

    scrollToBottom();
  } else if (data.status === 'completed') {
    processing.value = false;

    // 更新所有AI消息，确保没有留下isTyping=true的消息
    for (let i = chatMessages.value.length - 1; i >= 0; i--) {
      if (chatMessages.value[i].role === 'ai' && chatMessages.value[i].isTyping) {
        const updatedMessage = { ...chatMessages.value[i] };
        updatedMessage.isTyping = false;

        // 如果消息内容为空，添加一个提示
        if (!updatedMessage.text || updatedMessage.text.trim() === '') {
          updatedMessage.text = '(AI未返回有效回复)';
          updatedMessage.hasContent = true;
        }

        chatMessages.value.splice(i, 1, updatedMessage);
      }
    }

    // 强制DOM更新
    nextTick(() => {
      scrollToBottom();
    });
  }
};
// 更新AI启用状态
const updateAIEnabledStatus = () => {
  try {
    if (typeof window.sendWebSocketMessage === 'function') {
      const message = {
        type: 'ai_command',
        command: aiEnabled.value ? 'enable' : 'disable'
      };
      window.sendWebSocketMessage(JSON.stringify(message));
    }
  } catch (error) {
    console.error('更新AI状态失败:', error);
  }
};

// 监听aiEnabled变化
watch(aiEnabled, () => {
  updateAIEnabledStatus();
});
// 1. 在onMounted之前定义一个全局定时器变量
let cleanupInterval = null;

// 2. 修正onMounted块
onMounted(() => {
  // 初始化现有消息的hasContent属性
  chatMessages.value.forEach(msg => {
    if (msg.text && msg.text.trim() !== '') {
      msg.hasContent = true;
    }
  });

  // 添加事件监听器
  window.addEventListener('ai-response', handleAIResponse);
  window.addEventListener('ai-processing-status', handleAIProcessingStatus);

  // 只添加一次recognition-result监听器
  window.addEventListener('recognition-result', (event) => {
    const data = event.detail;
    if (data && data.text && data.text.trim() !== '') {
      addUserMessage(data.text);
    }
  });

  // 在全局范围添加处理WebSocket消息的函数
  if (!window.handleWebSocketAIMessage) {
    window.handleWebSocketAIMessage = (data) => {
      if (data.type === 'ai_response') {
        // 流式处理AI响应
        const textLength = (data.text || '').length;
        const fullTextLength = (data.full_text || '').length;

        console.log(`收到WebSocket AI响应: 文本块长度=${textLength}, 文本块="${data.text || ''}", 完整长度=${fullTextLength}`);

        // 创建自定义事件
        const aiEvent = new CustomEvent('ai-response', {
          detail: {
            text: data.text || '', // 当前增量文本块
            full_text: data.full_text || '', // 完整累积文本
            done: data.done || false,
            timestamp: Date.now() // 添加时间戳，便于调试
          }
        });

        // 分发事件
        window.dispatchEvent(aiEvent);

      } else if (data.type === 'ai_processing') {
        // 分发AI处理状态事件
        const statusEvent = new CustomEvent('ai-processing-status', {
          detail: {
            status: data.status,
            text: data.text
          }
        });
        window.dispatchEvent(statusEvent);
      }
    };
  }

  // 添加清理函数
  const cleanupTypingMessages = () => {
    let hasChanges = false;

    // 移除所有空的typing消息
    for (let i = chatMessages.value.length - 1; i >= 0; i--) {
      const msg = chatMessages.value[i];
      if (msg.role === 'ai' && msg.isTyping && (!msg.text || msg.text.trim() === '')) {
        chatMessages.value.splice(i, 1);
        hasChanges = true;
      }
    }

    // 确保不会有两个连续的typing消息
    let foundTyping = false;
    for (let i = chatMessages.value.length - 1; i >= 0; i--) {
      const msg = chatMessages.value[i];
      if (msg.role === 'ai' && msg.isTyping) {
        if (foundTyping) {
          chatMessages.value.splice(i, 1);
          hasChanges = true;
        } else {
          foundTyping = true;
        }
      }
    }

    return hasChanges;
  };

  // 执行一次初始清理
  if (cleanupTypingMessages()) {
    console.log('已清理残留的typing消息');
  }

  // 设置定期检查，确保不会有残留的typing消息
  cleanupInterval = setInterval(() => {
    if (processing.value) return; // 如果正在处理中，不进行清理

    if (cleanupTypingMessages()) {
      console.log('定期清理检测到并移除了残留的typing消息');
    }
  }, 5000);

  // 添加音频状态事件监听
  window.addEventListener('tts-status-change', handleTTSStatusChange);
});

// 3. 修改onUnmounted，确保正确清理资源
onUnmounted(() => {
  // 移除事件监听器
  window.removeEventListener('ai-response', handleAIResponse);
  window.removeEventListener('ai-processing-status', handleAIProcessingStatus);
  window.removeEventListener('recognition-result', (event) => {
    const data = event.detail;
    if (data && data.text && data.text.trim() !== '') {
      addUserMessage(data.text);
    }
  });

  // 清理定时器
  if (cleanupInterval) {
    clearInterval(cleanupInterval);
    cleanupInterval = null;
  }

  // 移除音频状态事件监听
  window.removeEventListener('tts-status-change', handleTTSStatusChange);
});

// 音频状态处理
const handleTTSStatusChange = (event) => {
  if (event && event.detail) {
    const { status, message } = event.detail;
    console.log(`TTS状态变更: ${status}, 信息: ${message}`);

    if (status === 'error') {
      ElMessage({
        type: 'warning',
        message: `语音播放出现问题: ${message}`,
        duration: 3000
      });
    } else if (status === 'started') {
      console.log('语音播放已开始');
      // 可以在这里添加UI提示，比如显示一个小图标表示正在播放
    } else if (status === 'completed') {
      console.log('语音播放已完成');
      // 可以在这里处理播放完成后的逻辑
    }
  }
};

// 修复toggleTTS函数
const toggleTTS = () => {
  ttsEnabled.value = !ttsEnabled.value;

  // 通知系统TTS状态变更
  window.dispatchEvent(new CustomEvent('tts-enabled-changed', {
    detail: { enabled: ttsEnabled.value }
  }));

  ElMessage({
    type: 'info',
    message: ttsEnabled.value ? '语音播放已开启' : '语音播放已关闭',
    duration: 2000
  });
};
</script>

<style scoped>
.chat-dialog {
  margin-top: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header h3 {
  margin: 0;
  font-size: 16px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f8f9fa;
}

.message {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  word-break: break-word;
}

.message.user {
  align-self: flex-end;
  background-color: #e3f2fd;
  color: #0d47a1;
  border-bottom-right-radius: 4px;
}

.message.ai {
  align-self: flex-start;
  background-color: #f1f1f1;
  color: #333;
  border-bottom-left-radius: 4px;
}

.message.system {
  align-self: center;
  background-color: #f8f9fa;
  color: #666;
  font-style: italic;
  padding: 4px 8px;
  font-size: 12px;
  max-width: 90%;
}

.input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #eee;
  background-color: white;
}

.input-area input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

.input-area button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #45a049;
}

.input-area button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.typing-indicator {
  display: flex;
  padding: 0;
  width: 40px;
  justify-content: center;
  margin-bottom: 4px;
}

.typing-text {
  display: block;
  margin-top: 4px;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.typing-indicator span {
  height: 7px;
  width: 7px;
  margin: 0 2px;
  background-color: #666;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.5s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.3s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes typing {
  0% {
    transform: translateY(0px);
  }

  28% {
    transform: translateY(-5px);
  }

  44% {
    transform: translateY(0px);
  }
}
</style>